<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <div class="alert alert-info" role="alert">解绑某个老师后，您的部分功能将受到限制！</div>


        <div class="teachers-list">
     
        </div>

      </div>
    </div>
  </div>
</div>


<style>
  .teachers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .teacher-card {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    width: calc(33.333% - 20px);
  }
  .teacher-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .teacher-footer {
    text-align: right;
    margin-top: 10px;
  }
</style>
<script>
  var usernames = sessionStorage.getItem("exam_username_forget_s");
    function delbdrelo(jbteacherid){
        layer.confirm('确定解绑吗？', {
            btn: ['确定','取消'] 
        }, function(){
            fetch('./bind/del.php?forid='+jbteacherid+'&userid='+userid+'&usernames='+usernames)
            .then(res=>res.json())
            .then(data=>{
                if(data.status === 200){
                    layer.msg('解绑成功');
                }else{
                    layer.msg('解绑失败');
                    return;
                }})});
    }
    var userid = sessionStorage.getItem("exam_userid_forget_s");
fetch('./bind/search.php?userid='+userid)
.then(res=>res.json())
.then(data=>{
    if(data.status !== 200){
        layer.msg('获取数据失败');
        return;
    }
    layer.msg('加载成功');
    var sjteach = data.teachers;
    for(let i=0;i<sjteach.length;i++) {
        let card = document.createElement("div");
        card.className="teacher-card";
        card.innerHTML = `
        <div class="teacher-header">
        <h5>${sjteach[i]['name']}老师</h5>
        <small>联系邮箱：${sjteach[i]['mail']}</small>
        </div>
        <div class="teacher-body">
        <p>个性签名：${sjteach[i]['js']}</p>
        </div>
        <div class="teacher-footer">
        <button onclick="delbdrelo('${sjteach[i]['id']}');" class="btn btn-danger">解绑</button>
        </div>`;
        document.querySelector(".teachers-list").appendChild(card);
    }    
})

</script>